<!--
 * Copyright ©
 * #
 * @author: zw
 * @date: 2023-01-12
 -->

<template>
  <transition-group name="fade-transform" mode="out-in">
    <div
      v-for="(item, index) in steps"
      :key="item.key"
      :data-v-step="item.key"
    />

    <v-tour
      key="tour"
      name="Tour"
      :steps="steps"
      :options="options"
      @after-step="onStepAfter"
      ref="vtour"
    >
      <template slot-scope="tour">
        <transition name="fade">
          <v-step
            v-if="tour.steps[tour.currentStep]"
            :key="tour.currentStep"
            :step="tour.steps[tour.currentStep]"
            :previous-step="tour.previousStep"
            :next-step="tour.nextStep"
            :stop="tour.stop"
            :skip="tour.skip"
            :is-first="tour.isFirst"
            :is-last="tour.isLast"
            :labels="tour.labels"
          >
            <template v-for="(item, index) in steps">
              <div slot="actions" v-if="tour.currentStep === index">
                <button
                  @click="index === 0 ? tour.skip() : tour.previousStep()"
                  :class="
                    index === 0
                      ? 'v-step__button'
                      : 'v-step__button v-step__button_first'
                  "
                  v-if="item.buttonPrevious"
                >
                  {{ index === 0 ? "跳过" : "上一步" }}
                </button>
                <button
                  @click="
                    index === steps.length - 1 ? tour.finish() : tour.nextStep()
                  "
                  class="v-step__button"
                  v-if="item.buttonNext"
                >
                  {{
                    index === steps.length - 1
                      ? "完成引导"
                      : index === 0
                      ? "立即开始"
                      : "下一步"
                  }}
                </button>
              </div>
            </template>
          </v-step>
        </transition>
      </template>
    </v-tour>
  </transition-group>
</template>

<script>
import router from "@/router";
const before = (path) => () => router.push(path);

const tour_map = {
  ".name": {
    header: { title: `<p>开始新手引导</p>` },
    content: `<p>欢迎登录${
      city_name == "dwdt" ? "山西电网动态系统" : "网域网站内容管理系统"
    }</p>`,
    placement: "left",
    before: before({ path: "/columnarticle/mywork" }),
  },
  ".el-tabs__header.is-top": {
    header: { title: `<p>我的工作任务</p>` },
    content: `<p>可以在我的工作任务中处理系统派发给你的任务</p>`,
    placement: "bottom",
    before: before({ path: "/columnarticle/mywork" }),
  },
  ".content_l": {
    header: { title: `<p>站点列表</p>` },
    content: `<p>点击站点标签，进入对应的栏目列表</p>`,
    placement: "right",
    before: before({ path: "/columnarticle/columnArticle" }),
  },
  ".firstSiteRow": {
    content: `<p>点击进入栏目列表</p>`,
    placement: "right",
    buttonNext: false,
    buttonPrevious: false,
  },
  ".content_l2": {
    header: { title: `<p>栏目列表</p>` },
    content: `<p>点击栏目标签，进入对应的文章列表</p>`,
    placement: "right",
    buttonPrevious: false,
  },
  ".row--current": {
    content: `<p>点击进入文章列表</p>`,
    placement: "right",
    buttonNext: false,
    buttonPrevious: false,
  },
  ".content_r": {
    header: { title: `<p>文章列表</p>` },
    content: `<p>可以在文章页进行文章的投递、审核、发布</p>`,
    placement: "left",
  },
};

export default {
  name: "tour",
  data() {
    return {
      options: { startTimeout: 300, useKeyboardNavigation: true },
      steps: Object.entries(tour_map).map(
        (
          [
            target,
            {
              content,
              header = null,
              placement,
              before,
              buttonPrevious = true,
              buttonNext = true,
            },
          ],
          index
        ) => ({
          target:
            target.indexOf(".") > -1 ? target : `[data-v-step="${target}"]`,
          key: target,
          header: header,
          content: index
            ? content.replace(/(?<=<p>).*(?=<\/p>)/, ($1) => `${index}.${$1}`)
            : content,
          params: { placement, highlight: true },
          buttonPrevious: buttonPrevious,
          buttonNext: buttonNext,
          before,
        })
      ),
      callbacks: {
        onStart: this.onStart,
        onPreviousStep: this.onPreviousStep,
        onNextStep: this.onNextStep,
        onStop: this.onStop,
        onSkip: this.onSkip,
        onFinish: this.onFinish,
      },
    };
  },

  mounted() {
    // this.$nextTick(() => {
    //   this.$tab.closeAllPage().then(() => {
    //     this.$router.push("/columnarticle/mywork");
    //   });
    //   setTimeout(() => {
    //     this.$tours["Tour"].start();
    //   }, 1000);
    // });
  },

  methods: {
    init() {
      this.$tab.closeAllPage().then(() => {
        if (this.$route.name == "Mywork")
          this.$router.replace({
            path: "/redirect" + "/columnarticle/mywork",
          });
      });
      this.$tours["Tour"].start();
    },
    onStart() {
      // this.$router.push({ path: '/columnarticle/columnArticle' });
    },
    onPreviousStep(currentStep) {
      console.log(
        "🚀 ~ file: index.vue:84 ~ onPreviousStep ~ currentStep",
        currentStep
      );
    },
    onNextStep(currentStep) {
      console.log(
        "🚀 ~ file: index.vue:85 ~ onNextStep ~ currentStep",
        currentStep
      );
      let channelListDom = document.querySelector(
        'div[data-v-step="channel-list"]'
      );
      if (currentStep == 1) {
        console.dir(channelListDom);
        channelListDom.className += " active";
      } else {
        channelListDom.className = channelListDom.className.replace(
          "active",
          ""
        );
      }
    },
    onStop() {},
    onSkip() {},
    onFinish() {},
    onStepAfter(a) {
      console.log("a: ", a);
      return;
      const currentRoute = this.$route.path;
      const nextRoute = this.getNextRoute(currentRoute);
      if (nextRoute) {
        this.$router.push(nextRoute);
      } else {
        // 引导结束
        console.log("引导结束");
      }
    },
    getNextRoute(currentRoute) {
      switch (currentRoute) {
        case "/":
          return "/page1";
        case "/page1":
          return "/page2";
        case "/page2":
          return "/page3";
        case "/page3":
          return null; // 表示引导结束
        default:
          return null;
      }
    },
  },
  //  End
};
</script>

<style lang="scss" scoped>
// div[data-v-step='name'] {
//   position: fixed;
//   top: 20px;
//   right: 0px;
//   width: 126px;
//   height: 40px;
//   background: transparent;
// }
// div[data-v-step='myWork'] {
//   position: fixed;
//   top: 85px;
//   left: 180px;
//   width: calc(100% - 180px);
//   height: 60px;
//   background: transparent;
// }
// div[data-v-step='leftTable'] {
//   position: fixed;
//   top: 85px;
//   left: 180px;
//   bottom: 35px;
//   width: 260px;
//   // height: calc(100% - 80px);
//   background: transparent;
// }
// div[data-v-step='.firstSiteRow'] {
//   position: fixed;
//   top: 85px;
//   left: 180px;
//   bottom: 35px;
//   width: 260px;
//   // height: calc(100% - 80px);
//   background: transparent;
// }
// div[data-v-step='firstChannelRow'] {
//   // ssh网段
//   position: fixed;
//   top: 85px;
//   left: 310px;
//   width: 82px;
//   height: 60px;
//   background: transparent;
//   transform: translateX(-50%);
//   pointer-events: none;
//   background-size: 100% 100%;
//   background-repeat: no-repeat;
// }
// div[data-v-step='article_content'] {
//   // 设置地区
//   position: fixed;
//   top: 137px;
//   left: 832px;
//   width: calc(100% - 444px);
//   height: 616px;
//   background: transparent;

//   transform: translateX(calc(-50% + 200px / 2));
//   pointer-events: none;
// }
.v-tour__target--highlighted {
  box-shadow: 0 0 0 99999px rgba(0, 0, 0, 0.6);
}
</style>
